import { FC, useState, Dispatch, SetStateAction } from 'react';
import styled from 'styled-components';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { useAuth } from 'content/auth-content';
import { ProjectList } from 'pages/project-list';
import { ProjectPage } from './project';

export const AuthenticatedApp: FC = ({ children }) => {
  const [show, setShow] = useState(false);

  return (
    <Container>
      <BrowserRouter>
        <PageHeader open={[show, setShow]} />
        <Routes>
          <Route path="/" element={<ProjectList open={[show, setShow]} />}></Route>
          <Route path="/projects" element={<ProjectList open={[show, setShow]} />}></Route>
          <Route path="/projects/:id/*" element={<ProjectPage />}></Route>
        </Routes>
      </BrowserRouter>
    </Container>
  );
}

const PageHeader = ({ open: [show, setShow] }: { open: [boolean, Dispatch<SetStateAction<boolean>>] }) => {
  return (
    <Header>
      <HeaderLeft>
        <Link to="/" className="img-box">
          <img width="20" src="https://tcs.teambition.net/thumbnail/111ycbcbc3a4159938b09b2a666e5a7e2f8b/w/100/h/100" alt="" />
        </Link>
        <div className="nav">
          <ul className="nav-ul">
            <li className="nav-li">0</li>
            <li className="nav-li">1</li>
            <li className="nav-li">2</li>
            <li className="nav-li">3</li>
            <li className="nav-li" onClick={() => { setShow(true); }}>创建项目</li>
          </ul>
        </div>
      </HeaderLeft>
      <HeaderRight>
        <User />
      </HeaderRight>
    </Header>
  );
}

const User = () => {
  const { logout, user } = useAuth();
  return (
    <div className="user-container">
      <span>Hi, {user?.name}</span>
      <button type="button" onClick={() => { logout() }}>退出登录</button>
    </div>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 2.5rem 1fr;
  height: 100vh;
`;

// grid-area 用来给grid子元素起名字
const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled.div`
  display: flex;
  justify-content: start;
  align-items: center;
  .nav {
    .nav-ul {
      display: flex;
      margin: 0;
      list-style: none;
      .nav-li {
        padding: 0 10px;
      }
    }
  }
`;
const HeaderRight = styled.div``;
const Main = styled.main`
  display: flex;
  overflow: hidden;
`;